<template>
    <div class="wrap">
        <a-button type="link" size="small" v-if="type == 'agree'" @click="handClick('agree')">同意</a-button>
        <a-button type="link" style="color:red;" size="small" v-else-if="type == 'refuse'"
            @click="handClick('refuse')">拒绝</a-button>
        <a-modal :visible="visible" :title="modalTitle" @cancel="cancel" @ok="ok" :confirmLoading="confirmLoading"
            :bodyStyle="{ padding: '0px' }" width="520px">
            <div class="modalWrap">
                <a-form :form="form" :colon="false" layout="horizontal" :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 17 }">
                    <a-row>
                        <a-col :span="24" v-if="type == 'agree'">
                            <FormSelect
                                :item="{ label: '数据权限', url: 'url', dataIndex: 'roles', required: true, mode: 'multiple', type: 'select', data: selectData }">
                            </FormSelect>
                        </a-col>
                        <a-col :span="24" v-else-if="type == 'refuse'">
                            <a-form-item label="拒绝原因" class="fixedBox-content-form-item">
                                <!-- <a-input size="large" placeholder="请输入拒绝原因"
                                    v-decorator="['auditFailReason', { rules: [{ required: true, message: '请输入拒绝原因' }] }]"
                                    style="width: 100%;">
                                </a-input> -->
                                <a-textarea size="large" placeholder="请输入拒绝原因"
                                    v-decorator="['auditFailReason', { rules: [{ required: true, message: '请输入拒绝原因' }] }]"
                                    style="width: 100%;" :autosize="{ minRows: 3, maxRows: 3 }"></a-textarea>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>
<script>
import FormSelect from '../FormSelect.vue';

export default {
    name: 'Examine',
    props: {
        type: {
            type: String,
        },
        record: {
            type: Object,
        },
        onRefresh: {
            type: Function,
            default: () => { }
        }
    },
    components: {
        FormSelect,
    },
    data() {
        return {
            visible: false,
            confirmLoading: false,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            selectData: [],
        }
    },
    methods: {
        handClick() {
            this.visible = true;
            if (this.type == 'agree') {
                this.getDeptRoles();
            }
        },
        cancel() {
            this.visible = false;
            this.init();
        },
        init() {
            this.confirmLoading = false;
            this.selectData = [];
            this.form.resetFields();
        },
        ok() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    let params = {
                        id: this.record.id,
                        status: this.type == 'agree' ? 1 : 2,
                        ...values,
                    };
                    if (params['roles']) {
                        params['roles'] = params['roles'].join(',')
                    }
                    this.confirmLoading = true;
                    this.postAxios(this.$agreeOrRefuse, params).then((res) => {
                        if (res.code == 200) {
                            this.$message.success('操作成功')
                            this.onRefresh();
                            this.cancel();
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    }).catch(() => {
                    }).finally(() => {
                        this.confirmLoading = false;
                    })
                }
            });
        },
        getDeptRoles() {
            this.getAxios(this.$getDeptRoles, {}).then((res) => {
                if (res.code == 200) {
                    this.selectData = res.data;
                }
            }).catch(() => {
            }).finally(() => {
            })
        }
    },
    computed: {
        modalTitle() {
            let res;
            switch (this.type) {
                case 'agree':
                    res = '同意'
                    break;
                case 'refuse':
                    res = '拒绝'
                    break;
            }
            return res;
        }
    }
}
</script>
<style lang="less" scoped>
.wrap {
    width: 100%;
    height: 100%;
}

.modalWrap {
    min-height: 120px;
    padding-top: 36px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}
</style>